import React, { useEffect } from 'react';
import { useState } from 'react';
import {View,Text,TextInput,TouchableOpacity,StyleSheet,ScrollView,Image,FlatList,Modal} from 'react-native';
import '../../global';
import { Feather } from '@expo/vector-icons';
import {useCommendList} from '../../context'
import { useSelector } from 'react-redux';

const getCurrentDay = () =>{
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = '0' + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
    }
    let currentdate = year + '-' + month + '-' + strDate;
    return currentdate;
}

const ImageGrop = ({list}) => {
    if(list.length==1){
        return (
            <View style={{display:'flex',flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                <Image source={{uri:list[0]}} style={styles.listimg}/>
            </View>
        )
    }
    else if(list.length==2){
        return (
            <View style={{display:'flex',flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                {
                    list.map((item,index)=>{
                        return (
                                <Image source={{uri:item}} style={styles.listimg2}/>
                  
                    )})
                }
            </View>
            )
    }else if(list.length==3){
        return (
            <View style={{display:'flex',flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
                {
                    list.map((item,index)=>{
                        return (
                                <Image source={{uri:item}} style={styles.listimg3}/>
                        
                        )
                    })
                }
            </View>
        )

    }else if(list.length==4){
        return (
            <View style={{display:'flex',flexDirection:'row',justifyContent:'center',alignItems:'center',flexWrap:'wrap'}}>
            {
                list.map((item,index)=>{
                    return (
                            <Image source={{uri:item}} style={styles.listimg4}/>
                    
                    )
                })
            }
        </View>
        )
    }
    return (

        <View style={{display:'flex',flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
        {
            list.map((item,index)=>{
                return (
                        <Image source={{uri:item}} style={styles.listimg5}/>
                
                )
            })
        }
    </View>
    )
}

const ShareDetail = ({route}) => {
    const [value,setValue] = useState('');
    const content = route.params.listcon;
    const [change,setChange] = useState(false);
    const {commendList,setCommendList} = useCommendList();
    const [modalVisible, setModalVisible] = useState(false);
    const [message,setMessage] = useState('');
    const list=useSelector(state=>state.list)
    const [coms,setComs]=useState([])
    useEffect(()=>{
        fetch('https://wx.qasdwer.top:8080/share/getcoms',{
        method:'post',
        headers:{
          'content-type':'application/json;charset=utf-8'
        },
        body:JSON.stringify({key0:content.key0})
        })
        .then(res=>res.json())
        .then(res=>{   
            setComs([...res])
        })
        .catch((error)=>{
        console.log("Error");
        throw error;
        })
    },[])

    return (
        <ScrollView keyboardShouldPersistTaps='always'>
               
            <View style={styles.content1}>
                <View style={styles.con1}>
                    <Image style={styles.userimg} source={{uri:content.userimg}} />
                    <View style={styles.con2}>
                        <Text>{content.username}</Text>
                        <Text style={styles.timer}>{content.time}</Text>
                    </View>
                </View>
                <Text style={styles.listcontent}>{content.content}</Text>
                {
                    content.img?
                    < ImageGrop list={content.img} />
                    :
                    <View></View>
                }
            </View>
            <View style={styles.commend}>
                <View style={styles.write}>
                    <Text style={{marginLeft:changeW(20),marginTop:changeH(27),fontSize:15}}>写评论</Text>
                    <TextInput style={styles.input} placeholder='请输入' value={value} onChangeText={(text)=>{setValue(text)}}/>
                    <TouchableOpacity style={{marginLeft:changeW(10),marginTop:changeH(23),backgroundColor:'#1E90FF',width:'10%',height:changeH(55),borderRadius:10,display:'flex',justifyContent:'center',alignItems:'center'}}
                        onPress={()=>{
                            if(list.isLogin==false){
                                setModalVisible(true);
                                setMessage('请先登录！');
                                setValue('');
                                setTimeout(()=>{
                                    setModalVisible(false);
                                },2000)
                            }else{
                            if(value== ''){
                                setModalVisible(true);
                                setMessage('请输入评论内容！');
                                setTimeout(()=>{
                                    setModalVisible(false);
                                },2000)
                            }
                            else{
                                let time0 = getCurrentDay();
                                let obj = {
                                    key0:content.key0,
                                    userimg:list.img,
                                    username:list.name,
                                    time0:time0,
                                    content:value,
                                }
                                
                                fetch('https://wx.qasdwer.top:8080/share/coms',{
                                 method:'put',
                                 headers:{
                                   'content-type':'application/json;charset=utf-8'
                                 },
                                 body:JSON.stringify(obj)
                                 })
                                 .catch((error)=>{
                                     console.log("Error");
                                     throw error;
                                }); 

                                content.comnum = content.comnum+1;
                                setComs([obj,...coms]);
                                let arr = [...commendList]
                                setCommendList(arr);
                                setValue('');
                                setChange(!change);
                                setModalVisible(true);
                                setMessage('评论成功！');
                                setTimeout(()=>{
                                    setModalVisible(false);
                                },2000)
                            }
                        }   
                        }}
                    ><Text
                        style={{color:'white',fontSize:changeW(20),fontWeight:'bold'}}
                    >发送</Text>
                        <Modal
                            transparent={true}
                            visible={modalVisible}
                >
                    <View>
                    <View style={{backgroundColor:'rgba(0,0,0,0.7)',borderRadius:20,
                        display:'flex',justifyContent:'center',alignItems:'center',
                        width:'70%',height:changeH(330),top:0.3*h,left:0.15*w}}>
                        <Text style={{color:'#F5F5F5',fontSize:changeW(35),fontWeight:'bold'}}>{message}</Text>
                    </View>
                    </View>
                </Modal>
                    
                    </TouchableOpacity>
                </View> 
                <View>
                    <Text style={{marginLeft:changeW(30),marginTop:changeH(20),fontSize:20}}>评论</Text>
                    {
                        coms.map((item,index)=>{
                            return(
                                <View
                                key = {index}
                                style={{width:'95%',backgroundColor:'#f1f1f1',marginLeft:changeW(20),borderRadius:changeW(20),marginTop:changeH(10),marginBottom:changeH(10)}}>
                                    <View style={styles.con1}>
                                        <Image style={styles.userimg} source={{uri:item.userimg}} />
                                        <View style={styles.con2}>
                                            <Text>{item.username}</Text>
                                            <Text style={styles.timer}>{item.time0}</Text>
                                        </View>
                                    </View>
                                    <Text style={styles.recon}>
                                        {item.content}
                                    </Text>
                                </View>
                            )
                        })
                    }
                </View>
            </View>
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    content1:{
        width:'95%',
        backgroundColor:'white',
        marginLeft:changeW(20),
        marginRight:changeW(20),
        marginTop:changeH(20),
        borderRadius:changeW(15),
        paddingBottom:changeH(20)
    },
    con1:{
        marginTop:changeH(20),
        marginLeft:changeW(15),
        flexDirection:'row'
    },
    con2:{
        flexDirection:'column',
        justifyContent:'space-around',
        marginLeft:changeW(10)
    },
    timer:{
        color:'#717171'
    },
    userimg:{
        width:changeW(80),
        height:changeW(80),
        borderRadius:changeW(40),
    },
    listcontent:{
        width:'95%',
        marginLeft:changeW(20),
        marginRight:changeW(20), 
        marginBottom:changeH(10),
        marginTop:changeH(30),
        color:'rgba(0,0,0,0.7)'
    },
    listimg:{
        width:'95%',
        height:changeH(400)
    },
    commend:{
        width:'95%',
        backgroundColor:'white',
        marginLeft:changeW(20),
        marginRight:changeW(20),
        marginTop:changeH(20),
        borderRadius:changeW(15),
        marginBottom:changeH(30),
        paddingBottom:changeH(15)
    },
    input:{
        width:changeW(500),
        height: changeH(80),
        backgroundColor:'#f1f1f1',
        borderRadius:changeH(40),
        marginTop:changeH(10),
        color:'black',
        marginLeft:changeW(20),
        paddingLeft:changeW(20),
        marginBottom:changeH(10)
    },
    write:{
        flexDirection:'row',
        marginTop:changeH(15)
    },
    recon:{
        marginLeft:changeW(30),
        marginTop:changeH(30),
        marginBottom:changeH(15)
    },
    listimg2:{
        width:'45%',
        height:changeH(400),
        marginRight:changeW(10)
    },
    listimg3:{
        width:'31%',
        height:changeH(400),
        marginRight:changeW(10)
    },
    listimg4:{
        width:'45%',
        height:changeH(200),
        marginRight:changeW(10),
        marginTop:changeH(10)
    },
    listimg5:{
        width:'31%',
        height:changeH(200),
        marginTop:changeH(10),
        marginLeft:changeW(13)
    }
    
})

export default ShareDetail